<template>
	<div class="body_inner">

		<div class="recommender_page">
			<div class="header">
				<a href="/main" class="logo"><img src="../assets/img/icon/logo.png" alt=""></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="accountMenu">
				<div class="info">
					<div class="left">
						<img src="../assets/img/icon/m_master.png" alt="" v-if="is_master == 1">
						<p class="name">{{indeData.user_no}}</p>
						<p class="name" id="copyText" style="position: absolute;z-index: -1;opacity: 0;">{{'https://test.pdt-daily.com/join?referno=' + indeData.user_no}}</p>
					</div>

					<div class="right">
						<button type="button" class="copy" data-clipboard-target="#copyText"><i
								class="xi-documents-o"></i></button>
						<button type="button" class="open_modal" @click="addAcount()"><i class="xi-plus"></i></button>
						<button type="button" class="open_modal_2" @click="allAccount = !allAccount"><i
								class="xi-caret-down-min"></i></button>
					</div>
				</div>

				<div id="accountPlus" v-if="allAccount">
					<ul>
						<li v-for="(value,index) in accountList" :key="index"><a>{{value.user_no}} <i
									class="xi-repeat" @click="swichAccount(index)"></i></a></li>
					</ul>

					<button type="button" class="open_modal"><i class="xi-plus" @click="addAcount()"></i>계정 추가</button>
				</div>
			</div>

			<section>
				<div>
					<p><span></span>1대</p>
					<p><span></span>2대</p>
				</div>

				<ul v-for="(value,index) in dataList" :key="index">
					<li>
						<div class="primary">
							<p style="line-height: 24px;"><span></span> {{value.user_no}}<br />({{value.account_id}})<br />({{value.real_name}})</p>

							<div>
								<p class="dollar">${{value.self_buy_price}}</p>

								<div class="percent">
								  <p>0%</p>
								  <p class="bar" v-if="Number(value.proportion) <= 1">
								    <span :style="{'width':value.proportion * 100 + '%',}"></span>
								    <span class="number" :style="{'left':value.proportion * 100 + '%'}">
								      <img src="../assets/img/icon/percent.png" alt="">
								      <br>{{value.now_proportion}}%
								    </span>
								  </p>
								  <p class="bar" v-else style="background: #17ceab;">
								    <span :style="{'width':(Number(value.proportion) - 1) * 100 + '%',}" style="background: #FD4444;"></span>
								    <span class="number" :style="{'left':(Number(value.proportion) - 1) * 100 + '%'}" style="color: #FD4444;">
								      <img src="../assets/img/icon/percentred.png" alt="">
								      <br>{{value.now_proportion}}%
								    </span>
								  </p>
								  <p>{{value.max_proportion}}%</p>
								</div>
							</div>
						</div>

						<ul v-for="(item,itemindex) in value.children" :key="itemindex">
							<li style="margin-bottom: 1rem;">
								<div class="secondary">
									<p style="line-height: 24px;"><span></span> {{item.user_no}}<br />({{item.account_id}})<br />({{item.real_name}})</p>

									<div>
										<p class="dollar">${{item.self_buy_price}}</p>

										<div class="percent">
										  <p>0%</p>
										  <p class="bar" v-if="Number(item.proportion) <= 1">
										    <span :style="{'width':item.proportion * 100 + '%',}"></span>
										    <span class="number" :style="{'left':item.proportion * 100 + '%'}">
										      <img src="../assets/img/icon/percent.png" alt="">
										      <br>{{item.now_proportion}}%
										    </span>
										  </p>
										  <p class="bar" v-else style="background: #17ceab;">
										    <span :style="{'width':(Number(item.proportion) - 1) * 100 + '%',}" style="background: #FD4444;"></span>
										    <span class="number" :style="{'left':(Number(item.proportion) - 1) * 100 + '%'}" style="color: #FD4444;">
										      <img src="../assets/img/icon/percentred.png" alt="">
										      <br>{{item.now_proportion}}%
										    </span>
										  </p>
										  <p>{{item.max_proportion}}%</p>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</section>

			<!-- <ul class="footer">
				<li><a href="/main"><i class="xi-home"></i>홈</a></li>
				<li><a href="/withdraw_apply"><i class="xi-money"></i>출금신청</a></li>
				<li><a href="/interest"><i class="xi-piggy-bank"></i>데일리내역</a></li>
				<li><a href="/staking"><img src="../assets/img/icon/staking_icon.png" alt="">상품 구매</a></li>
			</ul> -->
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>

		<div id="recommenderModal" class="modal" v-if="showModel">
			<div class="modal_body">
				<h3>추가계정 <span>{{next_account}}</span> 을(를) <br>추가 하시겠습니까?</h3>

				<button class="btn finish_btn" @click="creatAccount()">추가</button>
				<button type="button" class="btn close_btn" @click="showModel = false">닫기</button>
			</div>
		</div>

	</div>
</template>
<script>
	import {
		connect,
		stake,
		gelSolBal
	} from "../util/dapp"
	import axios from "axios";
	export default {
		data() {
			return {
				showModel: false,
				indeData: {},
				is_master: null,
				accountList: [],
				next_account: '',
				allAccount: false,
				info: {
					is_master: null,
					max_proportion: null,
					next_account: "",
					now_proportion: 0,
					now_reward: "",
					now_reward_pdt: "",
					now_usdt: "",
					now_usdt_pdt: "",
					pdt: "",
					self_buy_price: "",
				},
				dataList: [],
				allMenuShow: false
			};
		},
		created() {
			this.getInfo();
			this.getData();
		},
		methods: {
			getData(){
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/get_children', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					_this.dataList = response.data.data.user;
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 添加账户
			addAcount() {
				if (!this.next_account) {
					alert('현재 계정을 만들 수 없습니다.')
					return;
				}
				if (this.next_account == 1) {
					alert('구매 금액 부족')
					return;
				}
				this.showModel = true;
			},
			// 切换账号
			swichAccount(index) {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/change_account', {
					user_id: _this.accountList[index].user_id
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.allAccount = false;
						localStorage.setItem('token', response.data.data.token);
						_this.getInfo();
						_this.getData()
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			creatAccount() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/add_account', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.showModel = false;
						_this.getInfo();
					}
					if (response.data.status == 306) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			getInfo() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/index/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.info = response.data.data.data;
						_this.accountList = response.data.data.list;
						_this.next_account = response.data.data.data.next_account;
						_this.is_master = response.data.data.data.is_master;
						_this.indeData = response.data.data.user_info;
					}
					if(response.data.status == 401){
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>